<template>
  <div class="my-box">
    <div class="my">
      <div class="lef">
        <div class="list1" @click="list2($event)">
          我的交易
          <dl :class="open1">
              <dd>订单管理</dd>
              <dd>退换/售后</dd>
              <dd>收货地址</dd>
              <dd>专票抬头</dd>
          </dl>
        </div>
        <div class="list2" @click="list2($event)">
          我的资产
          <dl :class="open2">
              <dd>零钱</dd>
              <dd>代付</dd>
              <dd>银行卡</dd>
              <dd>优惠卷</dd>
              <dd>红包</dd>
          </dl>
        </div>
        <div class="list3" @click="list2($event)">
          我的账户
          <dl :class="open3">
              <dd>我的资料</dd>
          </dl>
        </div>
      </div>
      <div class="rig">
        <div class="mymessage">
          <div class="my_header">
            <el-avatar :size="110" :src="circleUrl"></el-avatar>
          </div>
          <div class="my_infor">
            <div>张三李四王二麻子（123***13）</div>
            <div>资料完整度:<el-progress :percentage="50" :format="format" ></el-progress>
                <button class="perfect" @click="toMyinfor">完善资料 </button>
            </div>
            <div>账户安全级别：<span>低</span></div>
          </div>
          <div class="my_assets">
            <span>优惠卷： 0 </span>
            <span>红包： 0</span>
            <span>金币:  0</span>
            <span>余额： 0</span>
          </div>
        </div>
        <div class="myorder">
          <div class="myorder_tltle">
            <span>|</span>我的订单
          </div>
          <div class="my_more">
            <div class="my_more_b">
              <i class="el-icon-box"></i>
              <p>待发货</p>
            </div>
            <div class="my_more_b">
              <i class="el-icon-wallet"></i>
              <p>待付款</p>
            </div>
            <div class="my_more_b">
              <i class="el-icon-truck"></i>
              <p>待收货</p>
            </div>
            <div class="my_more_b">
              <i class="el-icon-sold-out"></i>
              <p>退换/售后</p>
            </div>
            <div class="my_more_b">
              <i class="el-icon-s-order"></i>
              <p>全部订单</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      open1: 'open1',
      open2: 'open1',
      open3: 'open1',
      circleUrl: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic%2Fa3%2Fdd%2F26%2Fa3dd26ee5649ee4841d24495bf381885.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656418474&t=df6c409a7de82fc7e843d2e0f1c56d82'
    }
  },
  methods: {
    list2 (e) {
      const cname = e.currentTarget.firstElementChild.className
      const name = e.target.className
      console.log(cname)
      if (name === 'list1') {
        if (cname === 'close1') {
          this.open1 = 'open1'
        } else {
          this.open1 = 'close1'
        }
      } else if (name === 'list2') {
        if (cname === 'close1') {
          this.open2 = 'open1'
        } else {
          this.open2 = 'close1'
        }
      } else if (name === 'list3') {
        if (cname === 'close1') {
          this.open3 = 'open1'
        } else {
          this.open3 = 'close1'
        }
      }
    },
    format (percentage) {
      return percentage === 100 ? '满' : `${percentage}%`
    },
    toMyinfor () {
      this.$router.replace({ name: 'Myinfor' })
    }
  }
}
</script>
<style lang="less" scoped>
.my-box{
  background-image: url('http://pic.616pic.com/ys_bnew_img/00/40/10/cDT8qYb5I5.jpg');
  background-size: 50%;
}
.my{
  width: 53vw;
  margin: auto;
  height: 460px;
  margin-top: 50px;
  padding: 30px;
  border: 1px solid rgb(222, 217, 217);
  border-radius: 20px;
  .lef{
    box-shadow: 1px 1px 3px 1px rgb(217, 215, 215);
    float: left;
    width: 140px;
    background:  rgba(255, 255, 255, 0.911);
    div{
      border-bottom: 1px solid rgba(217, 215, 215, 0.402) ;
      font-weight: 700 ;
      padding: 10px 0 10px 20px;
      dl dd {
        font-size: 12px;
        font-weight: 400;
        margin: 5px 0 6px 20px;
      }
    }
  }
  .rig{
    width: 530px;
    height: 400px;
    // background-color: red;
    float: right;
    .mymessage{
      height: 190px;
      background-color: rgba(255, 255, 255, 0.911);
      padding: 10px;
      .my_header{
        margin-right: 10px;
        height: 110px;
        width: 120px;
        display: inline-block;
        overflow: hidden;
      }
      .my_infor{
        overflow: hidden;
        display:inline-block;
        width: 380px;
        height: 110px;
        padding-top: 20px;
        div{
          margin: 5px 0;
        }
        .el-progress{
          margin-left: 20px;
          width: 200px;
          display: inline-block;
        }
        .perfect{
          font-size: 12px;
          color: rgb(169, 169, 169);
        }
        span{
          color: red;
        }
      }
      .my_assets{
        padding-top: 15px;
        height: 50px;
        width: 100%;
        background: rgba(217, 217, 217, 0.766);
        text-align: center;
        span{
          margin: 20px ;
        }
      }
    }
    .myorder{
      height: 190px;
      margin-top: 20px;
      .myorder_tltle{
        width: 100%;
        height: 40px;
        background: rgba(226, 228, 228, 0.933);
        line-height: 40px;
        font-weight: 800;
        span{
          margin: 0 10px;
          font-weight: 900;
          font-size: 12px;
          color: rosybrown;
        }
      }
      .my_more{
        widows: 100%;
        height: 150px;
        background:  rgba(255, 255, 255, 0.911);
        display: flex;
        justify-content: space-around;
        align-items: center;
        .my_more_b{
          width: 80px;
          height: 120px;
          margin-top: 40px;
          text-align: center;
          i{
            font-size: 50px;
          }
          p{
            margin-top: 10px;
          }
        }
      }
    }
  }
  .open1 {
    display: block;
  }
  .close1 {
    display: none;
  }
}

</style>
